<template>
    <div class="or-page">
			<div
				@click="$emit('closeBand')"
				class="or-title row mb-12 flex col-center back-title">
				<div class="flex col-center">
					<div class="flex col-center">
						<span class="iconfont icon-20">&#xe601;</span>
					</div>
					<div class="ml-25">
						<span>绑定信息</span>
					</div>
				</div>
				<div> </div>
			</div>
			<div class="box">
				<div class="or-title row flex col-center mb-30">
					<div class="flex">
						<div>
							<span class="iconfont icon-20">&#xe62e;</span>
						</div>
						<div class="ml-6">
							<span>绑定手机号</span>
						</div>
					</div>
					<div> </div>
				</div>
				<ul>
					<li v-for="(item, index) in phoneArr" :key="item+index">
						<p class="title">{{item.phone}}</p>
						<p>绑定时间：{{item.date}}</p>
					</li>
				</ul>
			</div>
			<div class="box">
				<div class="flex col-center bt-row mb-30">
					<div class="or-title row mb-12 flex col-center">
						<div>
							<span class="iconfont icon-20">&#xe65a;</span>
						</div>
						<div class="ml-6">
							<span>车辆信息</span>
						</div>
					</div>
					<div> </div>
				</div>
				<ul>
					<li v-for="(item, index) in carArr" :key="item+index">
						<div class="title flex bt-row">
							<div>
								<span>{{item.opt_car_series_name}}</span>
								<span>{{item.subBrand || ''}}</span>
							</div>
							<span class="tag">{{item.license_plate}}</span>
						</div>
						<p>添加时间：{{ item.created_at }}</p>
					</li>
				</ul>
			</div>
	</div>
</template>

<script>
  export default {
    props: {
        phoneArr: Array,
		carArr: Array
    },
    data: () => {
        return {}
    }
  }
</script>
<style scoped>
	*{
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.tag {
		border: 1px solid #ededed;
		font-size: 12px;
		padding: 0 4px;
		border-radius: 12px;
		color: #000;
		background-color: #fff;
	}
	.mb-30{
		margin-bottom: 30px;
	}
	.back-title {
		margin-bottom: 20px;
	}
	.ml-6 {
		margin-left: 6px;
	}
	.ml-25 {
		margin-left: 25px;
	}
	.col-center {
  	align-items: center;
  }
  .flex{
    display: flex;
  }
	.bt-row {
    display: flex;
		justify-content: space-between;
  }
	.box {
    border: 1px solid #ededed;
    border-radius: 4px;
    padding: 20px;
    margin-bottom: 18px;
  }
  .box .top-title{
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 20px;
    text-align: left;
  }
	.icon-20{
		font-size: 20px;
	}
	.bottom-line {
		border-bottom: 1px solid #eee;
	}

	.or-page {
		background-color: #fff;
		width: 65vw;
		height: 80vh;
		border-radius: 8px;
		padding: 16px;
		color: #9aa0ad;
		font-size: 12px;
		text-align: left;
		overflow: auto;
	}
	.mt-12 {
		margin-top: 12px;
	}
	.mb-10 {
		margin-bottom: 10px;
	}
	.mb-5 {
		margin-bottom: 5px;
	}
	.mb-12 {
		margin-bottom: 12px;
	}
	.mb-16 {
		margin-bottom: 16px;
	}
	.or-title {
		font-size: 16px;
		font-weight: bold;
		color: #000;
	}
	.right-text{
		color: #000
	}
	.box ul li{
		margin-bottom: 30px;
		color: #666;
		font-size: 12px;
	}
	.box ul li .title {
		font-weight: bold;
		margin-bottom: 5px;
		font-size: 14px;
	}
	
</style>
